<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>My App</title>
    <link rel="stylesheet" href="../../packages/core/css/framework7.min.css">
  </head>
  <body>
    <div id="app">
      <div class="view view-main view-init">
        <div class="page">
          <div class="navbar">
            <div class="navbar-inner">
              <div class="title">Messages</div>
            </div>
          </div>
          <div class="toolbar messagebar">
            <div class="toolbar-inner">
              <div class="messagebar-area">
                <textarea class="resizable" placeholder="Message"></textarea>
              </div><a class="link send-link" href="#">Send</a>
            </div>
          </div>
          <div class="page-content messages-content">
            <div class="messages">
              <div class="messages-title"><b>Sunday, Feb 9,</b> 12:58</div>
              <div class="message message-sent">
                <div class="message-avatar" style="background-image:url(http://lorempixel.com/100/100/people/7)"></div>
                <div class="message-content">
                  <div class="message-name">John Doe</div>
                  <div class="message-header">Message header</div>
                  <div class="message-bubble">
                    <div class="message-text-header">Text header</div>
                    <div class="message-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
                    <div class="message-text-footer">Text footer</div>
                  </div>
                  <div class="message-footer">Message footer</div>
                </div>
              </div>
              <div class="message message-received">
                <div class="message-avatar" style="background-image:url(http://lorempixel.com/100/100/people/7)"></div>
                <div class="message-content">
                  <div class="message-name">John Doe</div>
                  <div class="message-header">Message header</div>
                  <div class="message-bubble">
                    <div class="message-text-header">Text header</div>
                    <div class="message-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
                    <div class="message-text-footer">Text footer</div>
                  </div>
                  <div class="message-footer">Message footer</div>
                </div>
              </div>
              <div class="message message-sent">
                <div class="message-content">
                  <div class="message-bubble">
                    <div class="message-text">Hi, Kate</div>
                  </div>
                </div>
              </div>
              <div class="message message-sent">
                <div class="message-content">
                  <div class="message-bubble">
                    <div class="message-text">How are you?</div>
                  </div>
                </div>
              </div>
              <div class="message message-received">
                <div class="message-avatar" style="background-image:url(http://lorempixel.com/100/100/people/9)"></div>
                <div class="message-content">
                  <div class="message-name">Kate</div>
                  <div class="message-bubble">
                    <div class="message-text">Hi, I am good!</div>
                  </div>
                </div>
              </div>
              <div class="message message-received">
                <div class="message-avatar" style="background-image:url(http://lorempixel.com/100/100/people/7)"></div>
                <div class="message-content">
                  <div class="message-name">Blue Ninja</div>
                  <div class="message-bubble">
                    <div class="message-text">Hi there, I am also fine, thanks! And how are you?</div>
                  </div>
                </div>
              </div>
              <div class="message message-sent">
                <div class="message-content">
                  <div class="message-bubble">
                    <div class="message-text">Hey, Blue Ninja! Glad to see you ;)</div>
                  </div>
                </div>
              </div>
              <div class="message message-sent">
                <div class="message-content">
                  <div class="message-bubble">
                    <div class="message-text">Hey, look, cutest kitten ever!</div>
                  </div>
                </div>
              </div>
              <div class="message message-sent">
                <div class="message-content">
                  <div class="message-bubble">
                    <div class="message-image"><img src="http://lorempixel.com/200/260/cats/4/" style="width:200px; height: 260px"></div>
                  </div>
                </div>
              </div>
              <div class="message message-received">
                <div class="message-avatar" style="background-image:url(http://lorempixel.com/100/100/people/9)"></div>
                <div class="message-content">
                  <div class="message-name">Kate</div>
                  <div class="message-bubble">
                    <div class="message-text">Nice!</div>
                  </div>
                </div>
              </div>
              <div class="message message-received">
                <div class="message-avatar" style="background-image:url(http://lorempixel.com/100/100/people/9)"></div>
                <div class="message-content">
                  <div class="message-name">Kate</div>
                  <div class="message-bubble">
                    <div class="message-text">Like it very much!</div>
                  </div>
                </div>
              </div>
              <div class="message message-received">
                <div class="message-avatar" style="background-image:url(http://lorempixel.com/100/100/people/7)"></div>
                <div class="message-content">
                  <div class="message-name">Blue Ninja</div>
                  <div class="message-bubble">
                    <div class="message-text">Awesome!</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript" src="../../packages/core/js/framework7.min.js"></script>
    <script>
      var theme = 'ios';
      if (location.href.indexOf('theme=md') >= 0) theme = 'md';
      var plugin = {
        params: {
          theme: theme,
          root: '#app',
        }
      };
      if (Framework7.use) Framework7.use(plugin);
      else if (Framework7.Class && Framework7.Class.use) Framework7.Class.use(plugin);
      
    </script>
    <script>
      var app = new Framework7();
      
      var $$ = Dom7;
      
      // Init Messages
      var messages = app.messages.create({
        el: '.messages',
      
        // First message rule
        firstMessageRule: function (message, previousMessage, nextMessage) {
          // Skip if title
          if (message.isTitle) return false;
          /* if:
            - there is no previous message
            - or previous message type (send/received) is different
            - or previous message sender name is different
          */
          if (!previousMessage || previousMessage.type !== message.type || previousMessage.name !== message.name) return true;
          return false;
        },
        // Last message rule
        lastMessageRule: function (message, previousMessage, nextMessage) {
          // Skip if title
          if (message.isTitle) return false;
          /* if:
            - there is no next message
            - or next message type (send/received) is different
            - or next message sender name is different
          */
          if (!nextMessage || nextMessage.type !== message.type || nextMessage.name !== message.name) return true;
          return false;
        },
        // Last message rule
        tailMessageRule: function (message, previousMessage, nextMessage) {
          // Skip if title
          if (message.isTitle) return false;
            /* if (bascially same as lastMessageRule):
            - there is no next message
            - or next message type (send/received) is different
            - or next message sender name is different
          */
          if (!nextMessage || nextMessage.type !== message.type || nextMessage.name !== message.name) return true;
          return false;
        }
      });
      
      // Init Messagebar
      var messagebar = app.messagebar.create({
        el: '.messagebar'
      });
      
      // Response flag
      var responseInProgress = false;
      
      // Send Message
      $$('.send-link').on('click', function () {
        var text = messagebar.getValue().replace(/\n/g, '<br>').trim();
        // return if empty message
        if (!text.length) return;
      
        // Clear area
        messagebar.clear();
      
        // Return focus to area
        messagebar.focus();
      
        // Add message to messages
        messages.addMessage({
          text: text,
        });
      
        if (responseInProgress) return;
        // Receive dummy message
        receiveMessage();
      });
      
      // Dummy response
      var answers = [
        'Yes!',
        'No',
        'Hm...',
        'I am not sure',
        'And what about you?',
        'May be ;)',
        'Lorem ipsum dolor sit amet, consectetur',
        'What?',
        'Are you sure?',
        'Of course',
        'Need to think about it',
        'Amazing!!!'
      ]
      var people = [
        {
          name: 'Kate Johnson',
          avatar: 'http://lorempixel.com/100/100/people/9'
        },
        {
          name: 'Blue Ninja',
          avatar: 'http://lorempixel.com/100/100/people/7'
        }
      ];
      function receiveMessage() {
        responseInProgress = true;
        setTimeout(function () {
          // Get random answer and random person
          var answer = answers[Math.floor(Math.random() * answers.length)];
          var person = people[Math.floor(Math.random() * people.length)];
      
          // Show typing indicator
          messages.showTyping({
            header: person.name + ' is typing',
            avatar: person.avatar
          });
      
          setTimeout(function () {
            // Add received dummy message
            messages.addMessage({
              text: answer,
              type: 'received',
              name: person.name,
              avatar: person.avatar
            });
            // Hide typing indicator
            messages.hideTyping();
            responseInProgress = false;
          }, 4000);
        }, 1000);
      }
    </script>
  </body>
</html>